<template>
  <div class="app-container">
    <div class="hearder_bar">
      <el-input
        v-model="queryParams.modulePageName"
        placeholder="请输入模块/页面名称"
        style="width: 250px"
        clearable
        @keyup.enter="handleQuery"
      >
        <template #append>
          <el-button icon="Search" @click="handleQuery"></el-button>
        </template>
      </el-input>
    </div>

    <el-table v-loading="loading" :data="permissionList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="模块名称" prop="moduleName" />
      <el-table-column label="页面名称" prop="pageName" />
      <el-table-column label="拥有权限角色数" prop="roleCount">
        <template #default="scope">
          <el-link type="primary" @click="showRoleDetail(scope.row)">
            {{ scope.row.roleCount }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="拥有权限用户数" prop="userCount">
        <template #default="scope">
          <el-link type="primary" @click="showUserDetail(scope.row)">
            {{ scope.row.userCount }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 权限详情弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="80%" append-to-body>
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 角色权限详情 -->
        <el-tab-pane label="拥有权限角色" name="role">
          <el-table
            v-loading="roleLoading"
            :data="roleList"
            @selection-change="handleRoleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="角色名称" prop="roleName" />
            <el-table-column label="备注" prop="remark" />
            <el-table-column label="角色状态" prop="status">
              <template #default="scope">
                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                  {{ scope.row.status === '0' ? '启用' : '禁用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="权限数" prop="permissionCount" />
            <el-table-column label="添加时间" prop="createTime" width="180">
              <template #default="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="roleTotal > 0"
            :total="roleTotal"
            v-model:page="roleQueryParams.pageNum"
            v-model:limit="roleQueryParams.pageSize"
            @pagination="getRoleList"
          />
        </el-tab-pane>

        <!-- 用户权限详情 -->
        <el-tab-pane label="拥有权限用户" name="user">
          <el-table
            v-loading="userLoading"
            :data="userList"
            @selection-change="handleUserSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="账号" prop="userName" />
            <el-table-column label="姓名" prop="nickName" />
            <el-table-column label="部门" prop="deptName" />
            <el-table-column label="岗位" prop="postName" />
            <el-table-column label="添加人" prop="createBy" />
            <el-table-column label="添加时间" prop="createTime" width="180">
              <template #default="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="userTotal > 0"
            :total="userTotal"
            v-model:page="userQueryParams.pageNum"
            v-model:limit="userQueryParams.pageSize"
            @pagination="getUserList"
          />
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 遮罩层
const loading = ref(false)
// 选中数组
const ids = ref([])
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple = ref(true)
// 总条数
const total = ref(0)
// 权限表格数据
const permissionList = ref([])
// 弹出层标题
const dialogTitle = ref('')
// 是否显示弹出层
const dialogVisible = ref(false)
// 当前激活的tab
const activeTab = ref('role')
// 角色数据
const roleList = ref([])
const roleTotal = ref(0)
const roleLoading = ref(false)
// 用户数据
const userList = ref([])
const userTotal = ref(0)
const userLoading = ref(false)
// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  modulePageName: null
})
// 角色查询参数
const roleQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  moduleName: null,
  pageName: null
})
// 用户查询参数
const userQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  moduleName: null,
  pageName: null
})
// 当前查看的权限信息
const currentPermission = ref(null)

// 静态数据
const staticPermissionData = [
  {
    id: 1,
    moduleName: '用户管理',
    pageName: '用户管理',
    roleCount: 5,
    userCount: 5
  },
  {
    id: 2,
    moduleName: '用户管理',
    pageName: '角色管理',
    roleCount: 2,
    userCount: 2
  },
  {
    id: 3,
    moduleName: '用户管理',
    pageName: '权限管理',
    roleCount: 5,
    userCount: 5
  },
  {
    id: 4,
    moduleName: '组织管理',
    pageName: '组织管理',
    roleCount: 23,
    userCount: 23
  },
  {
    id: 5,
    moduleName: '审批管理',
    pageName: '审批管理',
    roleCount: 7,
    userCount: 7
  },
  {
    id: 6,
    moduleName: '生产管理',
    pageName: '生产计划',
    roleCount: 12,
    userCount: 12
  },
  {
    id: 7,
    moduleName: '生产管理',
    pageName: '生产调度',
    roleCount: 8,
    userCount: 8
  },
  {
    id: 8,
    moduleName: '库存管理',
    pageName: '出库管理',
    roleCount: 15,
    userCount: 15
  },
  {
    id: 9,
    moduleName: '库存管理',
    pageName: '退货管理',
    roleCount: 6,
    userCount: 6
  },
  {
    id: 10,
    moduleName: '客户管理',
    pageName: '客户信息',
    roleCount: 18,
    userCount: 18
  }
]

// 静态角色数据
const staticRoleData = [
  {
    id: 1,
    roleName: '销售人员',
    remark: '销售',
    status: '0',
    permissionCount: 8,
    createTime: '2025-03-07 09:51:02'
  },
  {
    id: 2,
    roleName: '生产管理员',
    remark: '生产管理',
    status: '0',
    permissionCount: 12,
    createTime: '2025-03-07 10:15:30'
  },
  {
    id: 3,
    roleName: '库存管理员',
    remark: '库存管理',
    status: '0',
    permissionCount: 6,
    createTime: '2025-03-07 11:20:15'
  },
  {
    id: 4,
    roleName: '系统管理员',
    remark: '系统管理',
    status: '0',
    permissionCount: 25,
    createTime: '2025-03-07 08:30:45'
  },
  {
    id: 5,
    roleName: '财务人员',
    remark: '财务管理',
    status: '0',
    permissionCount: 4,
    createTime: '2025-03-07 14:25:10'
  }
]

// 静态用户数据
const staticUserData = [
  {
    id: 1,
    userName: 'YG001',
    nickName: '张三',
    deptName: '一级部门/二级',
    postName: '市场',
    createBy: '张三(zhangsan)',
    createTime: '2025-03-07 09:51:02'
  },
  {
    id: 2,
    userName: 'YG002',
    nickName: '李四',
    deptName: '生产部',
    postName: '生产主管',
    createBy: '李四(lisi)',
    createTime: '2025-03-07 10:15:30'
  },
  {
    id: 3,
    userName: 'YG003',
    nickName: '王五',
    deptName: '销售部',
    postName: '销售经理',
    createBy: '王五(wangwu)',
    createTime: '2025-03-07 11:20:15'
  },
  {
    id: 4,
    userName: 'YG004',
    nickName: '赵六',
    deptName: '技术部',
    postName: '技术总监',
    createBy: '赵六(zhaoliu)',
    createTime: '2025-03-07 08:30:45'
  },
  {
    id: 5,
    userName: 'YG005',
    nickName: '钱七',
    deptName: '财务部',
    postName: '财务经理',
    createBy: '钱七(qianqi)',
    createTime: '2025-03-07 14:25:10'
  }
]

/** 查询权限列表 */
const getList = () => {
  loading.value = true
  // 模拟异步请求
  setTimeout(() => {
    let data = [...staticPermissionData]

    // 搜索过滤
    if (queryParams.modulePageName) {
      data = data.filter(
        (item) =>
          item.moduleName.includes(queryParams.modulePageName) ||
          item.pageName.includes(queryParams.modulePageName)
      )
    }

    // 分页处理
    const start = (queryParams.pageNum - 1) * queryParams.pageSize
    const end = start + queryParams.pageSize

    permissionList.value = data.slice(start, end)
    total.value = data.length
    loading.value = false
  }, 300)
}

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.modulePageName = null
  handleQuery()
}

/** 显示角色详情 */
const showRoleDetail = (row) => {
  currentPermission.value = row
  activeTab.value = 'role'
  dialogTitle.value = `权限详情 - ${row.moduleName}/${row.pageName}`
  dialogVisible.value = true
  roleQueryParams.moduleName = row.moduleName
  roleQueryParams.pageName = row.pageName
  userQueryParams.moduleName = row.moduleName
  userQueryParams.pageName = row.pageName
  // 同时加载角色和用户数据
  getRoleList()
  getUserList()
}

/** 显示用户详情 */
const showUserDetail = (row) => {
  currentPermission.value = row
  activeTab.value = 'user'
  dialogTitle.value = `权限详情 - ${row.moduleName}/${row.pageName}`
  dialogVisible.value = true
  roleQueryParams.moduleName = row.moduleName
  roleQueryParams.pageName = row.pageName
  userQueryParams.moduleName = row.moduleName
  userQueryParams.pageName = row.pageName
  // 同时加载角色和用户数据
  getRoleList()
  getUserList()
}

/** 查询角色列表 */
const getRoleList = () => {
  roleLoading.value = true
  // 模拟异步请求
  setTimeout(() => {
    let data = [...staticRoleData]

    // 分页处理
    const start = (roleQueryParams.pageNum - 1) * roleQueryParams.pageSize
    const end = start + roleQueryParams.pageSize

    roleList.value = data.slice(start, end)
    roleTotal.value = data.length
    roleLoading.value = false
  }, 200)
}

/** 查询用户列表 */
const getUserList = () => {
  userLoading.value = true
  // 模拟异步请求
  setTimeout(() => {
    let data = [...staticUserData]

    // 分页处理
    const start = (userQueryParams.pageNum - 1) * userQueryParams.pageSize
    const end = start + userQueryParams.pageSize

    userList.value = data.slice(start, end)
    userTotal.value = data.length
    userLoading.value = false
  }, 200)
}

// 角色多选框选中数据
const handleRoleSelectionChange = (selection) => {
  // 处理角色选择
}

// 用户多选框选中数据
const handleUserSelectionChange = (selection) => {
  // 处理用户选择
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.hearder_bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}
</style>
